<template>
  <div class="article-list-container">
    <ArticleIntroduceItem v-for="article in articleList" :key="article.id" :article="article"/>


    <div class="pagination-wrapper" v-if="articleList.length">
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="currPage"
        :page-sizes="[2, 5, 10, 20]"
        :page-size="pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total">
      </el-pagination>
    </div>
  </div>

</template>

<script>
import ArticleIntroduceItem from "../components/ArticleIntroduceItem";
export default {
  name: "ArticleList",
  components: {
    ArticleIntroduceItem
  },
  data() {
    return {
      /*articles: [
        {
          id: '1',
          title: '标题',
          type: 'Javascript',
          time: '2022-03-01 20:14:52',
          intro: '前端处理过图片的同学,当图片出现像素大小不一,高宽不确定的时候,很多时候,需要根据容易大小完成图片的自适应等比缩放效果,不然会出现图片变形或者图片被裁剪的不友好渲染.',
          imgUrl: '/static/avatar.png',
          views: 10
        }
      ]*/
      articleList: [],

      // 分页
      currPage: 1,
      pageSize: 5,
      total: 0,  // 总博文数
    }
  },
  methods: {
    getArticleList(currPage, pageSize) {
      const url = '/home/getArticleList';
      this.$http.get(url, {
        params: {
          currPage,
          pageSize
        }
      }).then(response=>{
        let result= response.data;
        if(result.code===200) {
          let data= result.data;
          this.articleList= JSON.parse(data.list);
          this.currPage= Number(data.currPage);
          this.pageSize= Number(data.pageSize);
          this.total= parseInt(data.total);
        }
      })
    },

    // 分页器操作
    handleSizeChange(val) {
      // console.log(`每页 ${val} 条`);
      this.currPage= 1;
      this.pageSize= val;
      this.getArticleList(this.currPage, this.pageSize);
    },
    handleCurrentChange(val) {
      // console.log(`当前页: ${val}`);
      this.currPage= val;
      this.getArticleList(this.currPage, this.pageSize);
    }
  },
  mounted() {
    this.getArticleList(this.currPage,this.pageSize);
  }
}
</script>

<style scoped lang="less">
  .article-list-container {
    padding: 0 20px 20px 20px;
    text-align: left;

    .pagination-wrapper {
      margin-top: 40px;
      width: 100%;
      height: 40px;
      //display: flex;
      //justify-content: center;
      //align-items: center;
    }
  }
</style>
